<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>修缮信息管理</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<link rel="stylesheet" href="css/apaltment.css">
<link rel="stylesheet" href="css/jquery.sPage.css">
<link rel="stylesheet" href="css/jquery.sPage.green.css">
<link rel="stylesheet" href="css/jquery.sPage.red.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
.loading{
	width:200px;
	margin-left:45%;
}
    	.num{
            height: 50px;
    		line-height: 50px;
    		text-align: center;
    	}
    	.demo{
            margin-bottom: 20px;
            text-align: center;
        }
        /*租户详情页*/
		.xiangqing{
			width:100%;
			height:40px;
			background:floralwhite;
			margin:0 auto;
		}
		.modal-header{
			background:skyblue !important;
			color:saddlebrown !important;
		}
		.xiangqing:nth-child(2n){
			background:white !important;
		}
		.xiangqing div{
			height:40px;
			font-size:16px;
			line-height:40px;
		}
		.xiang_left{
			text-align:center;
			width:30% !important;
			float:left !important;
		}
		.xiang_right{
			text-align:left;
			width:70% !important;
			float:right !important;
		}
    </style>
</head>
<body>
<div class="search">
		
        <form action="">
        <span class="btn btn-primary" style="margin-right:10px" data-toggle='modal' data-target='#add'>添加</span>
            <label>
                <span>开始时间：</span>
                <input type="date" id="fp_start_date2" style="line-height:25px" id="hr_time2">
            </label>
            <label>
                <span>活动主题：</span>
                <input type="text" style="line-height:25px" id="fp_topic2" placeholder="请输入活动主题">
            </label>
            <label>
                <span>活动地点：</span>
                <input type="text" style="line-height:25px" id="fp_place2" placeholder="请输入活动地点">
            </label>
            <button type="button" id="searchFlatplay" style="margin-left: 25px" class="btn btn-primary">查询</button>
        </form>
    </div>
<table class="table table-bordered" style="margin-top: 20px;">
    
    <thead>
        <tr>
            <th>活动主题</th>
            <th>开始时间</th>
            <th>活动地点</th>
            <th>活动费用</th>
            <th>活动组织方</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="msg">
        
    </tbody>
</table>
 <img class="noneData" style="display:none" src="images/dataNone.png">
<img class="loading" src="images/loading.gif">
<div id="myPage" class="demo"></div>

<!-- 修改 -->
<div class="modal fade" id="update" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        修改信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                    <input type="text" id="fp_id" hidden>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动主题：</label>
                            <div class="col-sm-9">
                                <input id="fp_topic" type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">开始时间：</label>
                            <div class="col-sm-9">
                                <input id="fp_start_date" type="date" style="line-height:25px" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">结束时间：</label>
                            <div class="col-sm-9">
                                <input id="fp_end_date" type="date" style="line-height:25px" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动地点：</label>
                            <div class="col-sm-9">
                                <input id="fp_place" type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动费用(元)：</label>
                            <div class="col-sm-9">
                                <input id="fp_money" type="text" class="form-control">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动组织方：</label>
                            <div class="col-sm-9">
                                <input id="fp_organizer" type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动内容：</label>
                            <div class="col-sm-9">
                            	<input id="fp_content" type="text" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="updateFlatplay" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
    
<!-- 添加 -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加信息
                    </h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                    <input type="text" id="t_id" hidden>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动主题：</label>
                            <div class="col-sm-9">
                            	<input id="fp_topic1" type="text" class="form-control number" placeholder="请输入活动主题">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">开始时间:</label>
                            <div class="col-sm-9">
                               <input id="fp_start_date1" type="date" style="line-height:25px" class="form-control number">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">结束时间:</label>
                            <div class="col-sm-9">
                                <input id="fp_end_date1" type="date" style="line-height:25px" class="form-control number">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动地点：</label>
                            <div class="col-sm-9">
                                <input id="fp_place1" type="text" class="form-control number" placeholder="请输入活动地点">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动费用(元)：</label>
                            <div class="col-sm-9">
                                <input id="fp_money1" type="text" class="form-control number" placeholder="请输入活动费用(元)">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动组织方：</label>
                            <div class="col-sm-9">
                                <input id="fp_organizer1" type="text" class="form-control number" placeholder="请输入活动组织方">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-3 control-label">活动内容：</label>
                            <div class="col-sm-9">
                                <input id="fp_content1" type="text" class="form-control number" placeholder="请输入活动内容">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" id="addFlatplay" class="btn btn-primary">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
<!-- 详情 -->
<div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        详情信息
                    </h4>
                </div>
                <div class="modal-body" style="overflow:hidden">
					<div class="xiangqing">
						<div class="xiang_left">活动主题：</div>
   						<div class="xiang_right fp_topic"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">开始时间：</div>
   						<div class="xiang_right fp_start_date"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">结束时间：</div>
   						<div class="xiang_right fp_end_date"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">活动地点：</div>
   						<div class="xiang_right fp_place"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">活动费用：</div>
   						<div class="xiang_right fp_money"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">活动组织方：</div>
   						<div class="xiang_right fp_organizer"></div>
					</div>
					<div class="xiangqing">
						<div class="xiang_left">活动内容：</div>
   						<div class="xiang_right fp_content"></div>
					</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div> 
</body>
<script src="js/jquery.sPage.js"></script>
<script>
$(function(){
    ajaxPage(1);
});

function ajaxPage(page){
	$.ajax({
		url:"FlatplayGetAllServlet",
		dataType:"JSON",
		data:{pageIndex:page},
		success:function(data){
			$(".loading").css({"display":"none"})
			console.log(data)
			console.log("数据总数："+data[0].sum)
			var msg = ""
			//var pages=data[0]
			var sum = data[0].sum
			for(var i=0;i<data.length;i++){
				msg += "<tr>"+
					"<td>"+data[i].fptopic+"</td>"+
					"<td>"+data[i].fpstartdate+"</td>"+
					"<td>"+data[i].fpplace+"</td>"+
					"<td>"+data[i].fpmoney+"元</td>"+
					"<td>"+data[i].organizer+"</td>"+
					"<td>"+
						"<span onclick='getDetail("+data[i].fpid+")' class='btn btn-info' data-toggle='modal' data-target='#update'>修改</span>"+
						"<span onclick='getDetail("+data[i].fpid+")' class='btn btn-success' data-toggle='modal' data-target='#detail'>详情</span>"+
						"<span onclick='deleteById("+data[i].fpid+")' class='btn btn-danger'>删除</span>"+
					"</td>"+
				"</tr>"
			}
			
			$("#msg").html(msg)
			$("#myPage").unbind();
			$("#myPage").sPage({
		        page:page,//当前页码，必填
		        total:sum,//数据总条数，必填
		        pageSize:10,//每页显示多少条数据，默认10条
		        showTotal:true,//是否显示总条数，默认关闭：false
		        totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
		        noData: false,//没有数据时是否显示分页，默认false不显示，true显示第一页
		        showSkip:false,//是否显示跳页，默认关闭：false
		        showPN:true,//是否显示上下翻页，默认开启：true
		        prevPage:"上一页",//上翻页文字描述，默认“上一页”
		        nextPage:"下一页",//下翻页文字描述，默认“下一页”
		        fastForward: 5,//快进快退页数，默认0表示不开启快进快退
		        backFun:function(page){
		        	console.log("page:"+page)
		        	//点击分页按钮回调函数，返回当前页码
		            ajaxPage(page)
		            $("#msg").html("")
		            $(".loading").css({"display":"block"})
		        }
		    });
		},
		error:function(err){
			console.log("请求失败")
			console.log(err)
		}
	})
}

//删除活动信息
function deleteById(fp_id){
	console.log("SDA")
	if(confirm("确定删除吗？")){
		$.ajax({
			url:"FlatplayDeleteServlet",
			dataType:"JSON",
			data:{fp_id:fp_id},
			success:function(data){
				alert("删除成功")
				window.location.reload()
			}
		})
	}else{
		return
	}
}

//活动详情
function getDetail(fp_id){
	console.log("sdasd")
	$.ajax({
		url:"FlatplayDetailServlet",
		dataType:"JSON",
		data:{fp_id:fp_id},
		success:function(data){
			console.log(data)
			$(".fp_topic").html(data[0].fptopic)
			$(".fp_start_date").html(data[0].fpstartdate)
			$(".fp_end_date").html(data[0].fpenddate)
			$(".fp_place").html(data[0].fpplace)
			$(".fp_money").html(data[0].fpmoney+"元/人")
			$(".fp_organizer").html(data[0].organizer)
			$(".fp_content").html(data[0].fpcontent)
			
			$("#fp_id").val(data[0].fpid)
			$("#fp_topic").val(data[0].fptopic)
			$("#fp_start_date").val(data[0].fpstartdate)
			$("#fp_end_date").val(data[0].fpenddate)
			$("#fp_place").val(data[0].fpplace)
			$("#fp_money").val(data[0].fpmoney)
			$("#fp_organizer").val(data[0].organizer)
			$("#fp_content").val(data[0].fpcontent)
		},
		error:function(err){
			console.log("请求失败")
			console.log(err)
		}
	})
}

//修改活动信息
$("#updateFlatplay").click(function(){
	console.log("DSA")
	$.ajax({
		url:"FlatplayUpdateServlet",
		dataType:"JSON",
		data:{
			"fp_id":$("#fp_id").val(),
			"fp_start_date":$("#fp_start_date").val(),
			"fp_end_date":$("#fp_end_date").val(),
			"fp_topic":$("#fp_topic").val(),
			"fp_content":$("#fp_content").val(),
			"fp_place":$("#fp_place").val(),
			"fp_money":$("#fp_money").val(),
			"fp_organizer":$("#fp_organizer").val(),
		},
		success:function(data){
			alert("修改成功")
			window.location.reload()
		},
		error:function(err){
			console.log("请求失败")
			console.log(err)
		}
	})
})

//添加活动信息
$("#addFlatplay").click(function(){
	console.log("SDA")
	$.ajax({
		url:"FlatplayAddServlet",
		dataType:"JSON",
		data:{
			"fp_start_date":$("#fp_start_date1").val(),
			"fp_end_date":$("#fp_end_date1").val(),
			"fp_topic":$("#fp_topic1").val(),
			"fp_content":$("#fp_content1").val(),
			"fp_place":$("#fp_place1").val(),
			"fp_money":$("#fp_money1").val(),
			"fp_organizer":$("#fp_organizer1").val(),
		},
		success:function(data){
			alert("添加成功")
			window.location.reload()
		},
		error:function(err){
			
		}
	})
})

//条件查询
$("#searchFlatplay").click(function(){
	$("#msg").html("")
	$(".loading").css({"display":"block"})
	$(".noneData").css({display:"none"})
	search(1)
})
function search(page){
	$.ajax({
		url:"FlatplayGetByConditionServlet",
		dataType:"JSON",
		data:{
			"fp_start_date":$("#fp_start_date2").val(),
			"fp_topic":$("#fp_topic2").val(),
			"fp_place":$("#fp_place2").val(),
			"pageIndex":page,
		},
		success:function(data){
			console.log(data)
			$(".loading").css({"display":"none"})
			var msg = ""
			var sum = data[0].sum
			for(var i=0;i<data.length;i++){
				msg += "<tr>"+
					"<td>"+data[i].fptopic+"</td>"+
					"<td>"+data[i].fpstartdate+"</td>"+
					"<td>"+data[i].fpplace+"</td>"+
					"<td>"+data[i].fpmoney+"元</td>"+
					"<td>"+data[i].organizer+"</td>"+
					"<td>"+
						"<span onclick='getDetail("+data[i].fpid+")' class='btn btn-info' data-toggle='modal' data-target='#update'>修改</span>"+
						"<span onclick='getDetail("+data[i].fpid+")' class='btn btn-success' data-toggle='modal' data-target='#detail'>详情</span>"+
						"<span onclick='deleteById("+data[i].fpid+")' class='btn btn-danger'>删除</span>"+
					"</td>"+
				"</tr>"
			}
			$("#msg").html(msg)
			if(sum==0){
				$(".noneData").css({display:"block"})
			}
			$("#myPage").unbind();
			$("#myPage").sPage({
		        page:page,//当前页码，必填
		        total:sum,//数据总条数，必填
		        pageSize:10,//每页显示多少条数据，默认10条
		        showTotal:true,//是否显示总条数，默认关闭：false
		        totalTxt:"共{total}条",//数据总条数文字描述，{total}为占位符，默认"共{total}条"
		        noData: false,//没有数据时是否显示分页，默认false不显示，true显示第一页
		        showSkip:false,//是否显示跳页，默认关闭：false
		        showPN:true,//是否显示上下翻页，默认开启：true
		        prevPage:"上一页",//上翻页文字描述，默认“上一页”
		        nextPage:"下一页",//下翻页文字描述，默认“下一页”
		        fastForward: 5,//快进快退页数，默认0表示不开启快进快退
		        backFun:function(page){
		        	//点击分页按钮回调函数，返回当前页码
		            search(page)
		            $("#msg").html("")
		            $(".loading").css({"display":"block"})
		        }
		    });
		}
	})
}
</script>
</html>